import { FC } from 'react';
import { useTranslation } from 'react-i18next';
import LanguageRoundedIcon from '@mui/icons-material/LanguageRounded';
import IconButton from '@mui/joy/IconButton';
import Dropdown from '@mui/joy/Dropdown';
import MenuButton from '@mui/joy/MenuButton';
import Menu from '@mui/joy/Menu';
import MenuItem from '@mui/joy/MenuItem';

const LanguageSwitcher: FC = () => {
  const { i18n } = useTranslation('common');

  const changeLanguage = (language: string) => async () => {
    await i18n.changeLanguage(language);
  };

  return (
    <Dropdown>
      <MenuButton
        slots={{ root: IconButton }}
        slotProps={{ root: { variant: 'plain', color: 'neutral', size: 'sm' } }}
      >
        <LanguageRoundedIcon />
      </MenuButton>
      <Menu>
        <MenuItem onClick={changeLanguage('ru')}>Русский</MenuItem>
        <MenuItem onClick={changeLanguage('en')}>English</MenuItem>
      </Menu>
    </Dropdown>
  );
};

export default LanguageSwitcher;
